<template>
  <ul class="proList" :class="'cols_' + num">
    <li class="proItem" v-for="item in proList" @click='toDetail(item.proid)' :key='item.proid'>
      <div class="itemImage">
        <!-- 图片 -->
        <van-image
          :src="item.img1"
        />
      </div>
      <div class="itemInfo">
        <div class="proname van-multi-ellipsis--l2"> {{ item.proname }} </div>
        <div class="price"> ￥{{ item.originprice }} </div>
      </div>
    </li>

    <div class="changeIcon" @click="num = num == 1 ? 2 : 1">
      <van-icon name="apps-o" size='30' v-if='num == 1' />
      <van-icon name="bars" size='30' v-else />
    </div>

  </ul>

</template>
<script>
import Vue from 'vue'
import { Image as VanImage } from 'vant'

Vue.use(VanImage)
export default {
  data() {
    return {
      num: 1
    }
  },
  methods: {
    toDetail(proid){
      this.$router.push({
        name: 'detail',
        params: {
          proid
        }
      })

    }
  },
  props: {
    proList: {
      type: [Array, Object],
      require: true
    }
  }
}
</script>
<style scoped>
.cols_1 .proItem {
  height: 1rem;
  display: flex;
}
.cols_1 .proItem .itemImage {
  width: 1rem;
  height: 1rem;
  border: 1px solid #cccccc;
}
.cols_1 .proItem .itemImage .van-image img{
  width: 0.94rem;
  height: 0.94rem;
  margin: 0.03rem;
  display: block;
  border: 1px solid #f66;
  box-sizing: border-box;
}

.cols_1 .proItem .itemInfo{
  flex: 1;
  height: 1rem;
  padding: 5px 10px;

}
.cols_1 .proItem .itemInfo .proname{
  font-size: 14px;
}
.cols_1 .proItem .price{
  color: #f66;
}

/* 上边图,下边文 */
.cols_2 {
  display: flex;
  flex-wrap: wrap;
}
.cols_2 .proItem {
  width: 48%;
  margin: 3px 1%;
}
.cols_2 .proItem .itemImage {
  width: 100%;
  height: 1.7rem;
}
.cols_2 .proItem .itemImage .van-image{
  width: 100%;
  height: 100%;
}
.cols_2 .proItem .itemImage .van-image img{
  width: 100%;
  height: 100%;
  display: block;
}

.cols_2 .proItem .itemInfo{
  padding: 3px 10px;
}
.cols_2 .proItem .itemInfo .proname{
  font-size: 14px;
}
.cols_2 .proItem .price{
  color: #f66;
}
/* 切换图标 */
.changeIcon {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 60px;
  right: 10px;
}
</style>
